<template>
  <StudentLayout>
    <div class="flex">
      <el-tree
        class="border-solid border border-slate-300 pr-16 pt-6 pl-6 pb-14 rounded mr-16"
        ref="sdeptTree"
        style="max-width: 600px"
        :data="sdeptData"
        show-checkbox
        node-key="name"
        :props="sdeptProps"
        @check="checkRole"
      />
      <el-tree
        class="border-solid border border-slate-300 pr-16 pt-6 pl-6 pb-14 rounded mr-16"
        ref="courseTree"
        style="max-width: 600px"
        :data="courseData"
        show-checkbox
        node-key="cour_id"
        :props="courseProps"
      />
    </div>
    <el-button type="primary" class="mt-6" @click="submitTree">确定</el-button>
  </StudentLayout>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import StudentLayout from '@/layouts/StudentLayout.vue'
import  { getSdeptList, getCourseList, getSdeptToCourseList, editSdeptToCourse } from '@/composables/school'

const tableData = ref([])

const sdeptData = ref()
const sdeptProps = {
  label: 'name'
}
const listAjax = async () => {
  await getSdeptList().then(res => {
    sdeptData.value = res.data
  })
}

const courseData = ref()
const courseProps = {
  label: 'cour_name'
}
const courseAjax = async () => {
  await getCourseList().then(res => {
    courseData.value = res.data
  })
}

const submitTree = async () => {
  const treeKey = courseTree.value.getCheckedKeys()
  const params = {
    name: editName.value,
    cour_id: treeKey
  }
  await editSdeptToCourse(params).then(res => {
    
  })
}

const sdeptTree = ref()
const courseTree = ref()
const editName = ref()
const checkRole = async (data) => {
  // 只选中一项 
  editName.value = data.name
  sdeptTree.value.setCheckedKeys([data.name])
  await getSdeptToCourseList({name: data.name}).then(res => {
    if(res.data.length){
      courseTree.value.setCheckedKeys(res.data[0].cour_id)
    } else {
      courseTree.value.setCheckedKeys([])
    }
  })
}

onMounted(() => {
  listAjax()
  courseAjax()
})
</script>
<style scoped>

</style>